<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title th:text="${title}"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Autumn-Blog">
    <meta name="description" content="">
    <link rel="shortcut icon" href="https://github.com/shuaijunlan/Autumn-Framework/raw/master/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/autumn-blog/Lib/layui_v2.2.3/css/layui.css">
    <link rel="stylesheet" href="/autumn-blog/css/global.css">

    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" href="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/css/editormd.preview.css"/>
    <script src="https://hm.baidu.com/hm.js?8e822c2c1799adf85b31a053023de58e"></script>

    <style>
        .main_body {
            padding: 1%;
            background-color: #c7edcc;

        }

        .layout {
            width: auto;
        }
        .layout header{
            width: 80%;
            margin: auto;
            margin-bottom: 1rem;
        }
        .fontsize_h{
            font-size: 2rem;
        }
        .fontsize_d{
            font-size: 1rem;
        }

        #sidebar {
            width: 40%;
            height: auto;
            max-height: 90%;
            position: fixed;
            top: 10px;
            right: 0;
            overflow: hidden;
            background: #cce8cf;
            opacity: 0.85;
            z-index: 100;
            padding: 18px;
            display: none;
            border-radius: 15px; /*等价于 15px 15px 15px 15px*/
            border: 1px solid #4e63dd;
        }

        #sidebar:hover {
            overflow: auto;
        }

        #sidebar h1 {
            font-size: 1rem;
        }

        #custom-toc-container {
            padding-left: 0;
        }

        #test-editormd-view {
            margin: auto;
            width: 80%;
        }
        .editormd-preview-container ol.linenums li, .editormd-html-preview ol.linenums li {
            white-space: pre !important;
        }
        .sidebar-button{
            z-index: 999;
            position: fixed;
            right: 2%;
            top: 10px;
            cursor: pointer;
        }
        @media all and (max-width: 420px) {
            #test-editormd-view {
                margin: auto;
                width: 100%;
            }
            header h1{
                font-size: 1rem;
            }
            .fontsize_h{
                font-size: 1rem;
            }
            .fontsize_d{
                font-size: 0.5rem;
            }
            .sidebar-button{
                z-index: 999;
                position: fixed;
                right: 2%;
                top: 10px;
                cursor: pointer;
                font-size: 0.5rem;
            }
            #sidebar {
                width: 60%;
                padding: 0.5rem !important;
                font-size: 10px !important;
                line-height: 10px;
                height: auto;
                max-height: 90%;
                position: fixed;
                top: 10px;
                right: 0;
                overflow: hidden;

                z-index: 100;
                padding: 18px;
                border: 1px solid #4e63dd;
                display: none;
            }
        }
    </style>
</head>
<body>
<!--顶部主标题栏-->
<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <a class="fly-logo" href="/autumn-blog/main.html" style="font-size: 20px; color: #ff4500;margin: auto;">
            <!--<img src="../res/images/logo.png" alt="layui">-->
            Autumn-Blog
        </a>
        <ul class="layui-nav fly-nav layui-hide-xs">
            <!--<li class="layui-nav-item layui-this">-->
            <!--<a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>-->
            <!--</li>-->
            <!--<li class="layui-nav-item">-->
            <!--<a href="case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>-->
            <!--</li>-->
            <!--<li class="layui-nav-item">-->
            <!--<a href="http://www.layui.com/" target="_blank"><i class="iconfont icon-ui"></i>框架</a>-->
            <!--</li>-->
        </ul>

        <ul class="layui-nav fly-nav-user">

            <!-- 未登入的状态 -->
            <li class="layui-nav-item" id="username">
                <a class="iconfont icon-touxiang layui-hide-xs" href="#"></a>
            </li>
            <!--<li class="layui-nav-item">-->
                <!--<a href="#" onclick="Fv.login()">登入</a>-->
            <!--</li>-->
            <!--<li class="layui-nav-item">-->
                <!--<a href="#" onclick="Fv.register()">注册</a>-->
            <!--</li>-->
            <li class="layui-nav-item" style="margin-left: 20px;">
                <a target="_blank" href="/autumn-blog/index.do" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" style="font-size: 18px"><i class="layui-icon">&#xe608;</i>写文章</a>
            </li>
            <!--<li class="layui-nav-item layui-hide-xs">-->
            <!--<a href="#" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入" class="iconfont icon-qq"></a>-->
            <!--</li>-->

            <!-- 登入后的状态 -->
            <!--
            <li class="layui-nav-item">
              <a class="fly-nav-avatar" href="javascript:;">
                <cite class="layui-hide-xs">贤心</cite>
                <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
                <i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
                <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
              </a>
              <dl class="layui-nav-child">
                <dd><a href="user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
                <dd><a href="user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
                <dd><a href="user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
                <hr style="margin: 5px 0;">
                <dd><a href="/user/logout/" style="text-align: center;">退出</a></dd>
              </dl>
            </li>
            -->
        </ul>
    </div>
</div>

<div class="layui-container">
    <div class="layout main_body">
        <header style="width: 80%;text-align: center">
            <h1 class="fontsize_h"><span th:text="${title}"></span></h1>
            <p class="fontsize_d">
            <span>
                <span>作者：</span>
                <span th:text="${username}"></span>
            </span>|
                <span>
                <span>发布时间：</span>
                <span th:text="${time}"></span>
            </span>|
                <span>
                <span>访问量：</span>
                <span th:text="${visit_times}"></span>
            </span>
            </p>
        </header>
        <i class="sidebar-button" id="menu_list">Sidebar</i>
        <div id="sidebar">
            <h1>Table of Contents</h1>
            <div class="markdown-body editormd-preview-container" id="custom-toc-container" style="background-color: #cce8cf">#custom-toc-container</div>
        </div>
        <div id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc" th:text="${content}"></textarea>
        </div>

    </div>
</div>


<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/examples/js/jquery.min.js"></script>
<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/lib/marked.min.js"></script>
<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/lib/prettify.min.js"></script>

<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/lib/raphael.min.js"></script>
<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/lib/underscore.min.js"></script>
<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/lib/sequence-diagram.min.js"></script>
<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/lib/flowchart.min.js"></script>
<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/lib/jquery.flowchart.min.js"></script>
<script src="//autumnblog-1251679769.file.myqcloud.com/blogdetail/editor.md/editormd.js"></script>
<!--<script src="/autumn-blog/Lib/layui_v2.2.3/layui.js"></script>-->
<!--<script src="/autumn-blog/BasePlu/Base.js"></script>-->
<!--<script src="/autumn-blog/Sys/plugin/SysManage/mainPage.js"></script>-->


<script type="text/javascript">
    $(function() {
        var testEditormdView;


        testEditormdView = editormd.markdownToHTML("test-editormd-view", {
//                markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
            htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
            //toc             : false,
            tocm            : true,    // Using [TOCM]
            tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
            //gfm             : false,
            //tocDropdown     : true,
            markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });

        var switch_sidebar = 0;
        $("#menu_list").click(function () {
            if (switch_sidebar === 0){
                $("#sidebar").css("display", "block");
                switch_sidebar = 1;
            }else if (switch_sidebar === 1){
                $("#sidebar").css("display", "none");
                switch_sidebar = 0;
            }

        })
    });
</script>
</body>
</html>